import React, {PureComponent} from 'react';
import { Icon, Menu, MenuItem, Popover, Position } from "@blueprintjs/core";
import axios from '../../../../config/axios';
import {host} from '../../../../config/host';
import { connect } from "react-redux";
import { withRouter } from 'react-router';
import { userActions} from '../../../../store/user';

import './index.less';

class TopBar extends PureComponent{
    constructor(props) {
        super(props);
        this.handleLoginOut = this.handleLoginOut.bind(this);
    }

    componentDidMount() {
    }

    async handleLoginOut() {
        try {
            const msg = await axios.post(host + "login/out");
            if (msg.data.statusCode === 1){
                this.props.history.push('/login');
            }
        } catch (e) {
            console.log(e)
        }

    }

    render() {
        const {userReduce} = this.props;
        const {userId} = userReduce;
        return (
            <header className="TapBar">
                <div className="TapBar-title">
                    首页
                </div>
                <div className="TapBar-person">
                    <Icon icon={"user"} iconSize={17} intent={""} />
                    <Popover
                        content={
                            <Menu>
                                <MenuItem text="退出" onClick={this.handleLoginOut}/>
                            </Menu>
                        }
                        position={Position.BOTTOM}>
                        <span className="TapBar-name" onClick={this.showLoginOut}>{userId}</span>
                    </Popover>
                </div>
                <div className="TapBar-message">
                    <Icon icon={"notifications"} iconSize={17} intent={""} />
                </div>
            </header>
        )
    }
}
const mapStateToProps = ({ userReduce }) => ({ userReduce });
export default withRouter(connect(mapStateToProps, userActions)(TopBar));